<template>
  <div class="flex overflow-x-auto space-x-4 p-4">
    <div 
      v-for="feature in smallFeatures" 
      :key="feature.id" 
      class="bg-white p-4 rounded-lg min-w-[160px] shadow-sm hover:shadow-md transition-shadow"
    >
      <div class="w-16 h-16 bg-secondary rounded mx-auto mb-2 flex items-center justify-center">
        <span class="text-white font-bold">{{ feature.icon }}</span>
      </div>
      <p class="text-center">{{ feature.name }}</p>
    </div>
  </div>
</template>

<script setup>
const smallFeatures = [
  { id: 1, name: '草稿上色', icon: '🎨' },
  { id: 2, name: '一键三视图', icon: '🔍' },
  { id: 3, name: '相似图裂变', icon: '♻️' },
  { id: 4, name: '高清重绘', icon: '🖼️' },
  { id: 5, name: '智能扩图', icon: '🔧' },
  { id: 6, name: '一键抠图', icon: '✂️' },
  { id: 7, name: '局部重绘', icon: '🖌️' },
  { id: 8, name: '风格转换', icon: '🌍' },
  { id: 9, name: '画风迁移', icon: '🚚' },
];
</script>